<template>
    <div class="user-logininfo">
        <!-- LOGO -->
        <div class="image">
            <img src="@/assets/images/menu-icon@3x.png" alt="" srcset="" @click="openNav" />
        </div>

        <!-- SMS提醒 -->
        <template v-if="sms.isShow">
            <div class="message-container" v-if="sms.smsCount >= 1" @click="smsClick">
                <el-tooltip class="item" effect="dark" placement="top" :disabled="sms.smsCount <= 90">
                    <div slot="content">{{ sms.fullTip ? $t('sms.alreadyFullTips') : $t('sms.soonFullTips') }}</div>
                    <div :class="['message', sms.showFlag ? 'newsFlag' : '']" @mouseout="startFlag" @mouseover="stopFlag">
                        <div class="sms-num" id="smsCountTip">{{ sms.smsCount }}</div>
                        <img class="new-sms" src="@/assets/images/sms_ic_newsms@3.png" />
                    </div>
                </el-tooltip>
            </div>
        </template>

        <!-- 操作区 -->
        <div class="header-submit">
            <switchLanguage ref="lanRef" />
            <el-button id="logoutBtn" type="primary" @click="outLogin" class="logout">
                <div class="outLogin-content">
                    <div class="logout-text">{{ $t('logout') }}</div>
                    <div class="logout-img" v-if="!isShoWLogoutIcon">
                        <img src="@/assets/images/ic_lod out@3.png" alt="" srcset="" />
                    </div>
                </div>
            </el-button>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';

import { EventBus } from '@/utils/eventBus';

import { getSmsReadable } from '@/api/sms';

export default {
    data() {
        return {
            sms: {
                isShow: true,
                refreshTimer: null,
                smsCount: 0,
                showFlag: false,
                isFull: false,
                fullTip: false
            }
        };
    },

    created() {
        this.isShowSMS();

        if (this.sms.isShow) {
            this.$store.state.globalTimerStopFlag = false;

            this.getSMSCount();

            this.startRefresh();

            EventBus.$on('getNewSmsCount', () => {
                setTimeout(() => {
                    this.getSMSCount();
                }, 500);
            });
        }
    },

    destroyed() {
        EventBus.$off('getNewSmsCount', this.getSMSCount);
    },

    beforeDestroy() {
        clearInterval(this.sms.refreshTimer);
    },

    methods: {
        ...mapActions(['LOGOUT']),

        // 是否显示短信提醒
        isShowSMS() {
            this.sms.isShow = true;
        },

        startRefresh() {
            this.sms.refreshTimer = setInterval(() => {
                if (this.$store.state.globalTimerStopFlag) {
                    clearInterval(this.sms.refreshTimer);
                } else {
                    this.getSMSCount();
                }
            }, 10000);
        },

        startFlag() {
            this.sms.isFull ? (this.sms.showFlag = true) : null;
        },

        stopFlag() {
            this.sms.showFlag = false;
        },

        async getSMSCount() {

            try { 
                const { unread,full,current } = await getSmsReadable();
                this.sms.smsCount = unread;
                let isFull = current >= full;
                let soonfull = current >= full * 0.8;
                if (isFull) {
                    this.sms.isFull = true;
                    this.sms.fullTip = soonfull;
                    this.sms.showFlag = true;
                } else {
                    this.sms.isFull = false;
                    this.sms.fullTip = false;
                    this.sms.showFlag = false;
                }
            } catch (error) {
                console.log(error);
            }
        },

        async smsClick() {
            // 如果已经在 sms 页面，则刷新页面获取最新列表，否则跳转至 sms 页
            if (this.$route.path == '/sms') {
                await this.$router.replace({ path: this.$route.path, query: { location: 1 } });
                location.reload();
            }
            this.$router.push('/sms');
        },

        openNav() {
            this.$refs.lanRef.loseFocus();
            this.$emit('parentOpenNav');
        },

        async outLogin() {
            await this.LOGOUT();
        }
    },

    computed: {
        isShoWLogoutIcon() {
            return true;
        },
    },
    watch: {
        'sms.smsCount': {
            handler(nVal) {
                EventBus.$emit('smsCountChanged', nVal);
            },
            immediate: true
        }
    }
};
</script>

<style lang="less" scoped>
@import '@/assets/css/theme_blue/headernav.less';
/deep/.el-button {
    font-weight: normal;
}
.mesh-btn {
    margin-right: 12px;
    display: flex;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    img {
        width: 20px;
    }
    /deep/ .el-button--primary {
        color: @blueColor;
        font-weight: bolder;
        padding: 6px;
    }
}
@media screen and (max-width: 565px) {
    .mesh-btn {
        display: none;
    }
}
</style>
